<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>常用联系人</title>
    <link rel="stylesheet" href="../../../css/aui.css" />
    <link rel="stylesheet" href="../../../css/iconfont/iconfont.css" />
    <link rel="stylesheet" href="../../../css/my/sort.css" />
    <link rel="stylesheet" href="../../../css/iconfont/iconfont.css" />
    <link rel="stylesheet" href="../../../css/my/frequenter/index.css" />
</head>
<body style="cursor: pointer;">
    <div class="aui-content content-padded" style="position:fixed;width:100%;background:#f7f7f7;z-index:999;">
        <div class="search">
            <i class="aui-iconfont aui-icon-search" style="line-height:2.2rem;"></i>
            <input class="" onchange="change(this)" type="text" placeholder="搜索联系人">
        </div>
    </div>
    <div style="height:4.5rem;"></div>
    <div id="letter"></div>
    <div class="sort_box"></div>
    <div class="initials"><ul></ul></div>
</body>
</html>
<script type="text/template" charset="utf-8" id="contact_tpl">
    {{ for(var i=0;i<it.length;i++){ }}
    <div class="sort_list">
        <div class="num_logo">{{=it[i].contact_name.substring(0, 1)}}</div>
        <div class="num_name user_info gray-4">{{=it[i].contact_name}}</div>
        <div class="user_info gray-8">{{=it[i].contact_mobile}}</div>
        <div class="btn" onclick="contact_del({{=it[i].id}})">删除</div>
    </div>
    {{ } }}
</script>
<script type="text/javascript" src="../../../script/aui/api.js"></script>
<script type="text/javascript" src="../../../script/aui/aui-dialog.js"></script>
<script type="text/javascript" src="../../../script/extend/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../../script/extend/doT.min.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/extend/jquery.charfirst.pinyin.js"></script>
<script type="text/javascript" src="../../../script/extend/sort.js"></script>
<script type="text/javascript" src="../../../script/config.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        get_contact_list('');
        api.addEventListener({
            name: 'submitReload'
        }, function(ret, err) {
            if (ret.value.on == 1) {
                get_contact_list('');
            }
        });
    };
    //向左滑动删除
    window.addEventListener('load',function(){
        var initX;
        var moveX;
        var X = 0;
        var objX = 0;
        window.addEventListener('touchstart',function(event){
            // event.preventDefault();
            var obj = event.target.parentNode;
            if(obj.className == "sort_list"){
                initX = event.targetTouches[0].pageX;
                objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;
            }
            if( objX == 0){
                window.addEventListener('touchmove',function(event) {
                    // event.preventDefault();
                    var obj = event.target.parentNode;
                    if (obj.className == "sort_list") {
                        moveX = event.targetTouches[0].pageX;
                        X = moveX - initX;
                        if (X > 0) {
                            obj.style.WebkitTransform = "translateX(" + 0 + "px)";
                        }
                        else if (X < 0) {
                            var l = Math.abs(X);
                            obj.style.WebkitTransform = "translateX(" + -l + "px)";
                            if(l>160){
                                l=160;
                                obj.style.WebkitTransform = "translateX(" + -l + "px)";
                            }
                        }
                    }
                });
            }
            else if(objX<0){
                window.addEventListener('touchmove',function(event) {
                    // event.preventDefault();
                    var obj = event.target.parentNode;
                    if (obj.className == "sort_list") {
                        moveX = event.targetTouches[0].pageX;
                        X = moveX - initX;
                        if (X > 0) {
                            var r = -160 + Math.abs(X);
                            obj.style.WebkitTransform = "translateX(" + r + "px)";
                            if(r>0){
                                r=0;
                                obj.style.WebkitTransform = "translateX(" + r + "px)";
                            }
                        }
                        else {     //向左滑动
                            obj.style.WebkitTransform = "translateX(" + -120 + "px)";
                        }
                    }
                });
            }

        });
        window.addEventListener('touchend',function(event){
            // event.preventDefault();
            var obj = event.target.parentNode;
            if(obj.className == "sort_list"){
                objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;
                if(objX>-40){
                    obj.style.WebkitTransform = "translateX(" + 0 + "px)";
                }else{
                    obj.style.WebkitTransform = "translateX(" + -120 + "px)";
                }
            }
        })
    });
    //获取常用联系人列表

    function get_contact_list (search){
        var serverUrl = Config.common.getContact;
        ajax({url:serverUrl,data:{search:search}},function(ret){
            console.log(JSON.stringify(ret));
            if(ret.code == 1){
                var tpl=document.getElementById("contact_tpl").innerHTML;
                document.getElementsByClassName('sort_box')[0].innerHTML = doT.template(tpl)(ret.data);
                sort();
            }
        });
    }
    //删除常用联系人
    function contact_del(id){
        var dialog = new auiDialog({});
        dialog.alert({
            title:'删除',
            msg:'确认删除？',
            buttons:['取消','确认']
        },function(ret){
            if(ret.buttonIndex == 2){
                var serverUrl = Config.common.delContact;
                ajax({url:serverUrl,data:{id:id}},function(data){
                    if(data.code == 1){
                        $('.sort_box').eq(0).html('');
                        get_contact_list('');
                    }
                });
            }
        });
    }
    function change(obj){
        get_contact_list(obj.value);
    }
</script>
